<template>
  <div class="firmEacher">
    <img src="@/assets/images/eachers/headerBorder.png" alt="" class="top-bg" />
    <div class="main-box">
      <div class="eachers-left">
        <div class="left-top">
          <div class="search">
            <borderBox
              @options="optionsDemo1"
              :activeTime="activeTimeDemo1"
              :timeData="timeDataDemo1"
            />
          </div>
          <div class="title">
            <img src="@/assets/images/eachers/leftTitleBorder.png" alt="" />
            <h2>全公司完成率</h2>
          </div>
          <BorderBox10>
            <demo1 dv-bg :demo1TimeProps="demo1TimeProps" />
          </BorderBox10>
        </div>
        <div class="left-main">
          <div class="title">
            <img src="@/assets/images/eachers/leftTitleBorder.png" alt="" />
            <h2>财务能力预警</h2>
          </div>
          <demo2 dv-bg />
        </div>
        <div class="left-floor">
          <div class="title">
            <img src="@/assets/images/eachers/leftTitleBorder.png" alt="" />
            <h2>账款完成率</h2>
          </div>
          <BorderBox10>
            <demo3 dv-bg />
          </BorderBox10>
        </div>
      </div>
      <div class="eachers-content">
        <div class="content-header">
          <div class="list-img">
            <div class="bie">
              <div class="bie-box1">
                <img src="@/assets/images/eachers/bie1.png" alt="" />
                <div class="rate-box">
                  <p ref="rate1"></p>
                  <span>%</span>
                </div>
              </div>
            </div>
            <div class="txtBr1 txtBr">账款回收率</div>
          </div>
          <div class="list-img">
            <div class="bie">
              <div class="bie-box2">
                <img src="@/assets/images/eachers/bie2.png" alt="" />
                <div class="rate-box">
                  <p ref="rate2"></p>
                  <span>%</span>
                </div>
              </div>
            </div>
            <div class="txtBr2 txtBr">项目利润率</div>
          </div>
          <div class="list-img">
            <div class="bie">
              <div class="bie-box3">
                <img src="@/assets/images/eachers/bie3.png" alt="" />
                <div class="rate-box">
                  <p ref="rate3"></p>
                  <span>%</span>
                </div>
              </div>
            </div>
            <div class="txtBr3 txtBr">账款完成率</div>
          </div>
          <div class="list-img">
            <div class="bie">
              <div class="bie-box4">
                <img src="@/assets/images/eachers/bie4.png" alt="" />
                <div class="rate-box">
                  <p ref="rate4"></p>
                  <span>%</span>
                </div>
              </div>
            </div>
            <div class="txtBr4 txtBr">项目完成率</div>
          </div>
        </div>
        <div class="content-main">
          <Distribution />
          <img src="@/assets/images/eachers/mapBottom.png" alt="" />
        </div>
        <div class="content-floor">
          <div demo-bg class="floor-table">
            <div class="search">
              <borderBox @options="options" :activeTime="activeTime" :timeData="timeData" />
            </div>

            <ScrollBoard
              :config="config"
              style="width: 100%; background: #011738; min-height: 220px"
              @mouseover="mouseoverHandler"
              @click="clickHandler"
            />
          </div>
        </div>
      </div>
      <div class="eachers-right">
        <div class="right-header">
          <div class="title">
            <img src="@/assets/images/eachers/titleBorder.png" alt="" />
            <h2>项目总数统计</h2>
          </div>
          <div class="box-content">
            <demo4 />
          </div>
        </div>
        <div class="right-main">
          <div class="title">
            <img src="@/assets/images/eachers/titleBorder.png" alt="" />
            <h2>经营账款总额</h2>
          </div>
          <demo5 />
        </div>
        <div class="right-floor">
          <div class="title">
            <img src="@/assets/images/eachers/titleBorder.png" alt="" />
            <h2>经营账款统计</h2>
          </div>
          <div class="box-content">
            <demo6 />
          </div>
        </div>
      </div>
    </div>
    <img src="@/assets/images/eachers/floorBorder.png" alt="" class="floor-bg" />
  </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { onUnmounted, onMounted, ref, nextTick, reactive } from 'vue'
import { BorderBox10, ScrollBoard } from '@kjgl77/datav-vue3'
import Distribution from '@/components/eachers/Map/firm/distribution.vue'
import demo1 from '@/components/eachers/bar/firm/demo1.vue'
import demo2 from '@/components/eachers/radar/firm/demo2.vue'
import demo3 from '@/components/eachers/bar/firm/demo3.vue'
import demo5 from '@/components/firm/demo5.vue'
import demo4 from '@/components/eachers/Line/firm/demo4.vue'
import demo6 from '@/components/eachers/bar/firm/demo6.vue'
import borderBox from '@/components/firm/borderBox.vue'
import { CountUp } from 'countup.js'
import { getselectOrderApi } from '@/api/tickets/index.js'
import dayjs from 'dayjs'
import { getTimeRange } from '@/utils/dayjsDate.js'

let activeTimeDemo1 = ref(0)
let demo1TimeProps = ref('年')
let timeDataDemo1 = ref([
  {
    time: '年',
    i: 0,
  },
  {
    time: '季',
    i: 1,
  },
  {
    time: '月',
    i: 2,
  },
])

// 选择的时间
const optionsDemo1 = (v, i) => {
  demo1TimeProps.value = v.time
  activeTimeDemo1.value = i
}
let rate1 = ref(0)
let rate2 = ref(0)
let rate3 = ref(0)
let rate4 = ref(0)
let activeTime = ref(0)
let timeData = ref([
  {
    time: '年',
    i: 0,
  },
  {
    time: '季',
    i: 1,
  },
  {
    time: '月',
    i: 2,
  },
])
// 选择的时间
const options = (v, i) => {
  activeTime.value = i
  let params = {
    orderDateLte: null,
    orderDateGte: null,
  }
  switch (i) {
    case 0:
      params.orderDateLte = dayjs().format('YYYY-01-01 00:00:00')
      params.orderDateGte = dayjs().format('YYYY-12-31 23:59:59')
      break
    case 1:
      params.orderDateLte = getTimeRange('本季度')[0] + ' 00:00:00'
      params.orderDateGte = getTimeRange('本季度')[1] + ' 23:59:59'
      break
    case 2:
      params.orderDateLte = getTimeRange('本月')[0] + ' 00:00:00'
      params.orderDateGte = getTimeRange('本月')[1] + ' 23:59:59'
      break
  }
  getselectOrderData(params)
}

const config = reactive({
  header: ['单据编号', '业务类型', '时间', '数量', '金额'],
  data: [],
  align: ['center', 'center', 'center', 'center'],
  oddRowBGC: '#071742',
  evenRowBGC: '#011C59',
})

const mouseoverHandler = (e) => {
  console.log(e)
}

const clickHandler = (e) => {
  console.log(e)
}

// 请求工单轮播数据接口
const getselectOrderData = async (params) => {
  let res = await getselectOrderApi(params)
  let { rows, code } = res
  if (code === 200) {
    rows.forEach((v) => {
      config.data.push([
        v.orderId,
        v.productionVOS[0].businessType,
        v.orderDate.slice(0, 10),
        v.productionVOS[0].totalQuantity,
        v.totalOrderAmount,
      ])
    })
  }
}
onMounted(() => {
  let params = {
    orderDateLte: dayjs().format('YYYY-01-01 00:00:00'),
    orderDateGte: dayjs().format('YYYY-12-31 23:59:59'),
  }
  getselectOrderData(params)
  new CountUp(rate1.value, '54').start()
  new CountUp(rate2.value, '78').start()
  new CountUp(rate3.value, '61').start()
  new CountUp(rate4.value, '100').start()
})
</script>
<style scoped lang="scss">
.firmEacher {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #011738;
  padding: 0 10px;

  .top-bg {
    width: 100%;
    height: 80px;
  }

  .main-box {
    width: 100%;
    height: calc(100% - 160px);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .eachers-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 25%;
      height: 100%;

      .left-top,
      .left-main,
      .left-floor {
        width: 100%;

        .title {
          width: 100%;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          h2 {
            font-family: PangMen;
            position: absolute;
            bottom: 40%;
            left: 30%;
            color: #fff;
            margin: 0;
            font-size: 16px;
          }
        }

        .border-box-content {
          width: 100%;
          height: 85%;
        }
      }

      .left-top,
      .left-floor {
        height: 30%;
      }

      .left-top {
        position: relative;

        .search {
          z-index: 4000;
          box-sizing: border-box;
          font-family: PangMen;
          position: absolute;
          right: 10%;
          top: 0;
          align-items: center;
          justify-content: space-between;
          color: #0290ff;
          width: 30%;
          display: flex;
        }
      }

      .left-main {
        height: 25%;
      }
    }

    .eachers-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 40%;
      height: 100%;

      .content-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 20%;

        .list-img {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;

          .bie {
            width: 65%;
            height: 65%;

            .bie-box1,
            .bie-box2,
            .bie-box3,
            .bie-box4 {
              position: relative;

              img {
                width: 100%;
                height: 100%;
              }

              .rate-box {
                font-family: Electronic;
                position: absolute;
                top: 10%;
                left: 50%;
                transform: translateX(-50%);
                color: #fff;
                display: flex;
                align-items: center;

                p {
                  font-size: 20px;
                  font-weight: 800;
                }

                span {
                  font-size: 14px;
                }
              }
            }
          }

          .txtBr {
            margin-top: 10px;
            background-size: 95%;
            background-repeat: no-repeat;
            background-position-x: center; //横轴居中
            background-position-y: center; //纵轴居中
            font-size: 12px;
            color: #fff;
            width: 45%;
            height: 45%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .txtBr1 {
            background-image: url('@/assets/images/eachers/txtBr1.png');
          }

          .txtBr2 {
            background-image: url('@/assets/images/eachers/txtBr2.png');
          }

          .txtBr3 {
            background-image: url('@/assets/images/eachers/txtBr3.png');
          }

          .txtBr4 {
            background-image: url('@/assets/images/eachers/txtBr4.png');
          }
        }
      }

      .content-main {
        width: 100%;
        height: 50%;
        position: relative;

        img {
          position: absolute;
          bottom: -30%;
          left: 50%;
          transform: translateX(-50%);
          width: 60%;
          height: 60%;
          z-index: 2024;
          opacity: 0.4;
        }
      }

      .content-floor {
        width: 100%;
        height: 30%;

        .floor-table {
          height: 100%;
          position: relative;

          .search {
            z-index: 3000;
            box-sizing: border-box;
            font-family: PangMen;
            position: absolute;
            left: 0%;
            top: -20%;
            align-items: center;
            justify-content: space-between;
            color: #0290ff !important;
            width: 20%;
            display: flex;
          }

          .dv-scroll-board {
            border: 6px solid #162c69;
            height: 100%;

            :deep(.header) {
              color: #fff;
              font-weight: 500;
              background-color: rgba(7, 24, 75, 0.8) !important;
            }

            :deep(.rows) {
              color: #06b4f9;
            }
          }
        }
      }
    }

    .eachers-right {
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      .right-header,
      .right-main,
      .right-floor {
        width: 100%;

        .title {
          width: 100%;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          h2 {
            font-family: PangMen;
            position: absolute;
            bottom: 40%;
            right: 30%;
            color: #fff;
            margin: 0;
            font-size: 16px;
          }
        }

        .box-content {
          width: 100%;
          height: 85%;
        }
      }

      .right-header {
        height: 30%;
      }

      .right-main {
        height: 30%;
      }

      .right-floor {
        height: 30%;
      }
    }
  }

  .floor-bg {
    width: 100%;
    height: 80px;
  }
}
</style>
